<template>
  <div class="welcom-box">
       <el-card shadow="never">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }">数据统计</el-breadcrumb-item>
                <el-breadcrumb-item>数据报表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-card> 

        <div ref="reports" class="reports"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted() {
        this.initReports()
    },
    methods: {
        async initReports() {
            const reports =  this.$refs.reports
            const myChart = echarts.init(reports)

            const { data } = await this.$http({
                method: 'GET',
                url: 'reports/type/1'
            })

            if(data.meta.status !== 200) {
                this.$message({
                    type: 'error',
                    message: data.meta.msg
                })
            }

            const options = {
                title: {
                    text: '数据报表'
                },
                tooltip: {},
                xAxis: {
                     boundaryGap: true,
                },
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }],
                ...data.data
            }
            console.log(options)
            myChart.setOption(options)
        }
    }
}
</script>

<style scoped lang="less">
.welcom-box {
    h2{
        margin: 0;
        padding: 10px 20px;
    }
    .reports{
        margin: 20px;
        width: 800px;
        height: 400px;
    }
}
</style>